<template>
	<view class="H_imgs">
		<view class="H_img" v-for="(item,index) in images1" :key="index">
			<view class="H_mask" v-if="percents[index]!=101">
				 <arprogress style="color: #fff; font-size: 20rpx;" width="100" bgColor="rgba(0,0,0,.4)" borderWidth="10" inactiveColor="rgba(255,255,255,.5)" activeColor="#fff" :percent="percents[index]"><text>{{percents[index]}}%</text></arprogress>
			</view>
			<image style="border: 2rpx dashed #999;" :src="item" mode="" @longpress="delimg(index)"></image>
		</view>
		<!-- #ifdef APP-PLUS -->
		<image class="H_upimg" v-if="images.length<num" src="/static/app-plus/xxnmquanzi/bgimg/putimg.png" mode="" @click="uploadImg"></image>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<image class="H_upimg" v-if="images.length<num" :src="$api.img('/uploads/addons/xxnmquanzi/bgimg/putimg.png',$api.img_type().mymsg_icons_upload)" mode="" @click="uploadImg"></image>
		<!-- #endif -->
	</view>
</template>

<script>
	import arprogress from '@/components/uploadFile-img/index.vue'
	export default {
		name:"uploadFile-img",
		props: {
			images:{
				default:[]
			},
			num: {
				default:1 //默认一张
			},
			showTap:{
				default:true
			}
		},
		components: {
			arprogress
		},
		
		data() {
			return {
				percents:[],
				perIndex:0,
				number:0,
				timer:[],
				images1:[],
			};
		},
		methods: {
			delimg(index) {
				this.images.splice(index,1)
				this.images1.splice(index,1)
				this.percents.splice(index,1)
				this.$api.msg('删除成功')
				// #ifdef APP-PLUS
				this.$emit('images',this.images)
				// #endif
				// #ifdef MP-WEIXIN
				this.$emit('setimages',this.images)
				// #endif
			},
			// 上传图片
			uploadImg() {
				let that = this
				if (!that.showTap) {
					that.$api.msg('图片上传中...')
				}
				// that.showTap = false
				// #ifdef APP-PLUS
				that.$emit('showTap',false)
				// #endif
				// #ifdef MP-WEIXIN
				that.$emit('setshowTap',false)
				// #endif
				uni.chooseImage({
					count: that.num - that.images.length ,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success(res) {
						
						let index = 0
						that.perIndex = that.images1.length
						that.setImg(index, res)
					},
					fail(err) {
						// #ifdef APP-PLUS
						that.$emit('showTap',true)
						// #endif
						// #ifdef MP-WEIXIN
						that.$emit('setshowTap',true)
						// #endif
					}
				})
			},
			setImg(index, res) {
				let that = this
				that.images1.push(res.tempFilePaths[index])
				that.percents[that.perIndex] = 0
				that.uploadFile([res.tempFilePaths[index]])
					.then(res1 => {
						that.images.push(res1[0])
						that.percents[that.perIndex] = 101
						// #ifdef APP-PLUS
						that.$emit('images',that.images)
						// #endif
						// #ifdef MP-WEIXIN
						that.$emit('setimages',that.images)
						// #endif
						index++
						// console.log(index, res.tempFilePaths.length)
						let timer = null
						let tiemr1 = null
						if (index <= res.tempFilePaths.length - 1) {
							that.perIndex++
							that.setImg(index, res)
						} else {
							// #ifdef APP-PLUS
							that.$emit('showTap',true)
							// #endif
							// #ifdef MP-WEIXIN
							that.$emit('setshowTap',true)
							// #endif
						}
					}).catch(err => {
						that.images1.pop()
		
						// #ifdef APP-PLUS
						that.$emit('showTap',true)
						// #endif
						// #ifdef MP-WEIXIN
						that.$emit('setshowTap',true)
						// #endif
					})
			},
			uploadFile(tempFilePaths, types) {
				let that = this
				let token = uni.getStorageSync("token");
				let sign = that.$api.getsign();
				return new Promise((resolve, reject) => {
					let uploadTask = uni.uploadFile({
						url: that.$api.baseUrl + '/api/xxnmupload/upload',
						filePath: tempFilePaths[0],
						name: 'avatar',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'token': token || '',
							'sign': sign,
							'platformid':that.$api.platformid
						},
						formData: {
							pic_type: types || ''
						},
						success: (uploadFileRes) => {
							let img = JSON.parse(uploadFileRes.data)
							if (img.msg == '非法图片文件') {
								uni.showToast({
									title: '非法图片文件',
									icon: 'none'
								})
								return
							}
							resolve(img.data.url)
						},
						fail:(err=>{
							reject(err)
						})
					});
					uploadTask.onProgressUpdate(e=>{
						if(that.percents[that.perIndex]==101) {
							return
						}
						that.percents[that.perIndex] = e.progress
						
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.H_imgs {
	display: flex;
	flex-wrap: wrap;
	.H_img {
		display: inline-block;
		position: relative;
		margin: 0rpx 0 30rpx 30rpx;
		.H_mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 155rpx;
			height: 155rpx;
			z-index: 10;
			background: rgba(0,0,0,.4);
			display: flex;
			justify-content: center;
			align-items: center;
		}
		image {
			width: 155rpx;
			height: 155rpx;
			margin: 0;
		}
	}
	.H_upimg {
		width: 155rpx;
		height: 155rpx;
		margin: 0rpx 0 30rpx 30rpx;
	}
}
</style>
